<template>
    <view class="container">
        <view class="title df tac fdc ac">
            <view class="avatar">
                <image src="@/static/img/avatar.png"></image>
            </view>
            <view class="name">{{ store.userInfo.UserName || '未登录' }}</view>
        </view>
        <view class="task">
            <view class="city-flex df jsb ac">
                <view class="box-left">我的任务</view>
            </view>
            <view>
                <view class="card linear-1">
                    <text>巡查任务 {{ taskStat.XcrwFinishedPer }}%</text>
                    <view class="progress-box">
                        <progress
                            :percent="taskStat.XcrwFinishedPer"
                            stroke-width="10"
                            color="#FE545A"
                        />
                    </view>
                </view>
                <view class="card linear-2">
                    <text>上报任务 {{ taskStat.SbrwFinishedPer }}%</text>
                    <view class="progress-box">
                        <progress
                            :percent="taskStat.SbrwFinishedPer"
                            stroke-width="10"
                            color="#8CC6FF"
                        />
                    </view>
                </view>
            </view>
        </view>
        <view class="content">
            <view class="list" @click="myAttention">
                <view class="list-left">
                    <view class="list-left-icon">
                        <image src="@/static/img/wode5.png"></image>
                    </view>
                    <view class="list-left-text">我的关注</view>
                </view>
                <view class="list-right">
                    <image src="@/static/img/wode4.png"></image>
                </view>
            </view>
            <view class="list" @click="update">
                <view class="list-left">
                    <view class="list-left-icon">
                        <image src="@/static/img/wode1.png"></image>
                    </view>
                    <view class="list-left-text">检查更新</view>
                </view>
                <view class="list-right">
                    <image src="@/static/img/wode4.png"></image>
                </view>
            </view>
            <view class="list clear-line" @click="loginOut">
                <view class="list-left">
                    <view class="list-left-icon">
                        <image src="@/static/img/logout.png"></image>
                    </view>
                    <view class="list-left-text">退出登录</view>
                </view>
                <view class="list-right">
                    <image src="@/static/img/wode4.png"></image>
                </view>
            </view>
        </view>
    </view>
    <lh-check-update ref="checkUpdateRef"></lh-check-update>
</template>

<script setup>
import { useUserStore } from '@/stores'
const store = useUserStore()

const taskStat = {
    XcrwTotal: 10,
    XcrwFinished: 2,
    XcrwFinishedPer: 20,
    SbrwTotal: 10,
    SbrwFinished: 5,
    SbrwFinishedPer: 50,
}

const myAttention = () => {
    if (store.userInfo.isLogin) {
        uni.navigateTo({
            url: '/pages/mySelf/myAttention',
        })
    } else {
        uni.navigateTo({
            url: '/pages/login/index',
        })
    }
}

const loginOut = () => {
    store.clearUserAll()
    uni.reLaunch({
        url: '/pages/login/login',
    })
}
const checkUpdateRef = ref()
const update = () => {
    checkUpdateRef.value?.update()
}
</script>

<style lang="scss" scoped>
page {
    height: 100%;
}
.container {
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url('@/static/img/bg-1.png');
    height: 100%;
    overflow-y: auto;
    .title {
        padding-top: 100rpx;

        .avatar {
            width: 120rpx;
            height: 120rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .name {
            font-size: 50rpx;
        }
    }
    .task {
        background: #ffffff;
        border-radius: 16rpx;
        box-shadow: 3px 8px 18px 2px rgba(232, 232, 232, 0.5);
        margin: 60rpx 30rpx;
        padding-bottom: 1px;
        padding: 30rpx;
        .city-flex {
        }
        .card {
            border-radius: 24rpx;
            padding: 30rpx;
            margin-top: 30rpx;
        }
    }
    .content {
        background: #ffffff;
        border-radius: 16rpx;
        box-shadow: 3px 8px 18px 2px rgba(232, 232, 232, 0.5);
        margin: 60rpx 30rpx;
        .list {
            height: 110rpx;
            line-height: 110rpx;
            border-bottom: #d8d8d8 1px solid;
            margin-left: 28rpx;
            margin-right: 28rpx;
            display: flex;
            justify-content: space-between;
            padding-top: 20rpx;
        }
        .list-left {
            display: flex;
            justify-content: flex-start;
        }

        .list-left-icon {
            padding-right: 20rpx;
        }

        .list-left-icon image {
            width: 70rpx;
            height: 70rpx;
        }

        .list-left-text {
            padding-top: 8rpx;
        }

        .list-right image {
            width: 20rpx;
            height: 40rpx;
            padding-top: 12rpx;
        }
        .clear-line {
            border-bottom: none;
        }
    }
}
</style>
